M
MLOG
React „Lazy Loading“: Komponentų Kodo Išskaidymas Optimizuotam Našumui | MLOG | MLOG ); } export default ImageGallery;

Ir Image.js komponentas:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Šiame pavyzdyje kiekvienas paveikslėlis yra apgaubtas <Suspense> komponentu, todėl kiekvienam paveikslėliui bus rodomas įkrovimo pranešimas, kol jis bus įkeliamas. Tai neleidžia blokuoti viso puslapio, kol paveikslėliai yra atsiunčiami.

Pažangesnės Technikos ir Svarstymai

1. Klaidų Ribos (Error Boundaries)

Naudojant „lazy loading“, svarbu tvarkyti galimas klaidas, kurios gali įvykti įkrovimo proceso metu. Klaidų ribos (Error Boundaries) gali būti naudojamos šioms klaidoms pagauti ir parodyti atsarginę vartotojo sąsają. Galite sukurti klaidų ribos komponentą taip:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atnaujinkite būseną, kad kitas atvaizdavimas parodytų atsarginę UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę UI
      return 
Kažkas nutiko negerai.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Tada apgaubkite <Suspense> komponentą su <ErrorBoundary>:



  Kraunama...}>

Jei įvyksta klaida kraunant MyComponent, <ErrorBoundary> ją pagaus ir parodys atsarginę vartotojo sąsają.

2. Serverio Pusės Atvaizdavimas (SSR) ir „Lazy Loading“

„Lazy loading“ taip pat galima naudoti kartu su serverio pusės atvaizdavimu (SSR), siekiant pagerinti pradinį jūsų aplikacijos įkrovimo laiką. Tačiau tam reikalinga papildoma konfigūracija. Reikia užtikrinti, kad serveris teisingai tvarkytų dinaminius importus ir kad atidėtai įkeliami komponentai būtų tinkamai „hidratuoti“ kliento pusėje.

Įrankiai, tokie kaip Next.js ir Gatsby.js, siūlo integruotą palaikymą „lazy loading“ ir kodo išskaidymui SSR aplinkose, todėl procesas tampa daug paprastesnis.

3. Atidėtai Įkeliamų Komponentų Išankstinis Įkėlimas

Kai kuriais atvejais galite norėti iš anksto įkelti atidėtai įkeliamą komponentą, prieš jam iš tikrųjų prireikiant. Tai gali būti naudinga komponentams, kurie greičiausiai bus greitai atvaizduoti, pavyzdžiui, komponentams, esantiems žemiau matomos ekrano dalies, bet į kuriuos tikėtina, kad bus nuslinkta. Komponentą galite iš anksto įkelti rankiniu būdu iškviesdami import() funkciją:


import('./MyComponent'); // Išankstinis MyComponent įkėlimas

Tai pradės komponento įkėlimą fone, todėl jis bus pasiekiamas greičiau, kai bus faktiškai atvaizduojamas.

4. Dinaminiai Importai su „Webpack Magic Comments“

Webpack „magiškieji komentarai“ suteikia galimybę pritaikyti sugeneruotų kodo dalių pavadinimus. Tai gali būti naudinga derinant ir analizuojant jūsų aplikacijos paketų struktūrą. Pavyzdžiui:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Tai sukurs kodo dalį pavadinimu „my-component.js“ (ar panašiai) vietoj bendrinio pavadinimo.

5. Kaip Išvengti Dažniausių Klaidų

Realaus Pasaulio Pavyzdžiai ir Panaudojimo Atvejai

„Lazy loading“ gali būti taikomas įvairiems scenarijams, siekiant pagerinti React aplikacijų našumą. Štai keletas pavyzdžių:

Pavyzdys: Tarptautinė elektroninės prekybos svetainė

Įsivaizduokite elektroninės prekybos svetainę, parduodančią produktus visame pasaulyje. Skirtingos šalys gali turėti skirtingas valiutas, kalbas ir produktų katalogus. Užuot iš anksto įkėlus visus duomenis kiekvienai šaliai, galite naudoti „lazy loading“, kad įkeltumėte duomenis, būdingus vartotojo vietai, tik tada, kai jis apsilanko svetainėje.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcija, nustatanti vartotojo šalį

  return (
    Kraunamas turinys jūsų regionui...}>
      
      
    
  );
}

Išvada

„Lazy loading“ ir komponentų kodo išskaidymas yra galingos technikos, skirtos optimizuoti React aplikacijų našumą. Įkeldami komponentus tik tada, kai jų prireikia, galite žymiai sutrumpinti pradinį įkrovimo laiką, pagerinti vartotojo patirtį ir sustiprinti savo SEO. React integruoti React.lazy() ir <Suspense> komponentai leidžia lengvai įdiegti „lazy loading“ jūsų projektuose. Pasinaudokite šiomis technikomis, kad sukurtumėte greitesnes, jautresnes ir patrauklesnes interneto aplikacijas pasaulinei auditorijai.

Įgyvendindami „lazy loading“, visada atsižvelkite į vartotojo patirtį. Pateikite informatyvias atsargines vartotojo sąsajas, tinkamai tvarkykite galimas klaidas ir atidžiai analizuokite savo aplikacijos našumą, kad įsitikintumėte, jog pasiekiate norimus rezultatus. Nebijokite eksperimentuoti su skirtingais požiūriais ir rasti geriausią sprendimą pagal savo konkrečius poreikius.